<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue实训系统</title>
    <script src="vue.js"  ></script>
<style>
    body{
	background:url('d547221ca1bad9ba5d32dcda8e8b3a4026144e0a.jpg');
	background-repeat: no-repeat;
	background-size:100%;
	background-position: 0px -50px;
}
#login-box{
	background-color: #fafafa;
	border-radius: 13px;
	text-align: center;
	margin: 0px auto;
	margin-top: 80px;
	width: 350px;
	height: 400px;
}

#login-box h1{
	padding-top: 60px;
	color: #080808;
}

#login-box .input-box{
	margin-top: 30px;
}
#login-box .input-box input{
	border: 1;
	border-bottom: #0a0a0a 2px solid;
	padding: 10px 20px;
	outline: none;
	color: #7a526b;
}

#login-box button{
	line-height:30px;
	margin-top: 30px;
	width: 130px;
	height: 30px;
	border-radius:13px ;
	outline: none;
	border: none;
	background-image: linear-gradient(120deg, #3e73f0 0%, #f06e72 100%);
	color: #FFFFFF;
}

#login-box button:hover{
	background-image: linear-gradient(to top, #1eadad 0%, #7720e2 100%);
}
#login-box .input-box i{
	color: #FFFFFF;
}
</style>
    </head>
<body>
	<div id="app">

		<div id="login-box">
			<h1>{{pageName | toUpcase}}</h1>
			<div class="input-box">
				
				<input type="text" placeholder="请输入用户名：" />
			</div>
			<div class="input-box">

				<input type="password" placeholder="请输入密码：" />
			</div>
				<a  v-bind:href="url">忘记密码</a><br>

			<button @keyup.enter="keyupTest">登录</button>
			<button>注册</button>

		</div>

</div>
	

		
	</div>

	<script>
		var vue=new Vue({
			el:'#app',
			data:{
				 pageName:'Vue实训系统',
				 url:'https://gitee.com/',
				 isShow:true
				 },
			methods:{
        			 keyupTest(){
          				console.log("正在登录......")  
      							}
        			},
			filters:{
				toUpcase(value){
					           return value ? value.toUpperCase() : ''
							   }
					}  
						})
	</script>
</body>
</html>